<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="bootstrap-5.3.3-dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- 第一：下载、导入 Vue 框架的 JS 文件 -->
    <script src="js/vue.js"></script>

    <style>
      /* 自定义按钮大小 */
      .btn-xs {
        --bs-btn-padding-y: .15rem; 
        --bs-btn-padding-x: .3rem; 
        --bs-btn-font-size: .75rem
      }
    
      /* 设置图片位置及大小 */
      .image {
        position: absolute;
        right: 50px;
        top: 20px;
      }
    
      .image img {
        max-width: 230px;
      }
    </style>
  </head>
  <body>

    <!-- 第二：结构化页面，设置挂载点 -->
    <div id="app">
      <!-- 1.商品列表 -->
      <div class="container">
        <div class="card">
          <div class="card-header bg-primary text-white">
            商品管理
          </div>
      
          <div class="card-body">
            
            <!-- 
              table-striped：斑马条纹
              table-hover：启用悬停状态
              table-sm：小表格
            -->
            <table class="table table-striped table-hover table-sm">
              <tr align="center" class="table-info">
                <th>
                  <input type="checkbox" v-model="selectAll" @change="quanXuan"/>
                </th>
                <th>序号</th>
                <th>编号</th>
                <th>名称</th>
                <th>单价</th>
                <th>库存</th>
                <th>小计</th>
                <th>操作</th>
              </tr>


              <tr v-if="productList.length==0">
                <td colspan="8" align="center" style="color:red;">数据为空</td>
              </tr>

              <!-- 在数据行中，循环遍历 Vue 实例定义的 productList 数组中的数据 -->
              <!-- productList数组中的数据在页面加载时(mounted)，异步请求从服务器中获取 -->
              <tr v-else align="center" v-for="(p,i) in productList" :key="p.id">
                <td>
                  <input type="checkbox" :value="p.id" v-model="selectRows"/>
                </td>
                <td>{{ i + 1 }}</td>
                <td>{{ p.id }}</td>
                <td>{{ p.name }}</td>
                <td>{{ p.price }}</td>
                <td>
                  <button class="btn btn-primary  btn-xs">-</button>
                  <input type="text" style="width: 50px;" :value="p.count">
                  <button class="btn btn-primary  btn-xs">+</button>
                </td>
                <td>{{ p.price * p.count | moneyFilter('$',1) }}</td>
                <td>
                  <!-- 绑定事件，并把当前行的商品编号和索引传递到事件方法中 -->
                  <button type="button" class="btn btn-danger btn-xs" v-on:click="delProduct(p.id,i)">删除</button>
                  <!-- 绑定事件，并把当前行的 商品信息和索引 传递到事件方法中 -->
                  <button type="button" class="btn btn-primary btn-xs" @click="edit(p,i)">编辑</button>
                </td>
              </tr>

              <tr v-show="productList.length != 0">
                <td colspan="8" align="right">总计：{{ total | moneyFilter('$',1) }} 元</td>
              </tr>

            </table>







          </div>
        </div>
      </div>
      

      <!-- 2.添加/修改表单 -->
      <div class="container mt-3">
        <div class="card">
          <div class="card-header bg-warning-subtle text-dark">
            {{ isUpdate == false ? '添加商品' : '修改商品' }}
          </div>
      
          <!-- 卡位：让其后代元素相对于自己定位 -->
          <div class="card-body ms-5" style="position: relative;" @dblclick="cls">
            <!-- 表单 -->
            <form>
              
              <div class="row mb-3">
                <div class="col-auto">
                  <label for="productId" class="col-form-label">编号</label>
                </div>
                <div class="col-sm-3">
                  <input type="text" id="productId" class="form-control" v-model="product.id" ref="pid">
                </div>
              </div>

              <div class="row mb-3">
                <div class="col-auto">
                  <label for="productName" class="col-form-label">名称</label>
                </div>
                <div class="col-sm-3">
                  <input type="text" id="productName" class="form-control" v-model="product.name">
                </div>
              </div>

              <div class="row mb-3">
                <div class="col-auto">
                  <label for="productPrice" class="col-form-label">单价</label>
                </div>
                <div class="col-sm-3">
                  <input type="text" id="productPrice" class="form-control" v-model="product.price">
                </div>
              </div>

              <div class="row mb-3">
                <div class="col-auto">
                  <label for="productCount" class="col-form-label">库存</label>
                </div>
                <div class="col-sm-3">
                  <input type="text" id="productCount" class="form-control" v-model="product.count">
                </div>
              </div>

              <div class="row mb-3">
                <div class="col-auto">
                  <label for="productDesc" class="col-form-label">简介</label>
                </div>
                <div class="col-sm-6">
                  <textarea class="form-control" 
                            id="productDesc" name="productDesc" rows="3" v-model="product.desc"></textarea>
                </div>
              </div>


              <div class="row mb-3">
                <div class="col-auto">
                  <button type="button" class="btn btn-primary" @click="save">保存</button>
                  <button type="button" class="btn btn-warning text-dark">清空</button>
                  <button type="button" class="btn btn-danger" @click="delMore">批量删除</button>
                </div>
              </div>

            </form>


            <!-- 图片 -->
            <div class="image">
              <img src="images/default.jpeg"/>
            </div>

          </div>
        </div>
      </div>
    </div>

 
    
    <script src="bootstrap-5.3.3-dist/js/bootstrap.min.js" ></script>

    <script src="js/jquery-3.7.1.js"></script>
    <script src="js/index.js"></script>
  </body>
</html>